<%@ page contentType="text/html;charset=utf-8" pageEncoding="UTF-8"%>
<%@include file="/common/common.jsp" %>

<html>
	<head>
		<title>组织管理-组织列表</title>
		<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/skin.css">
		<link href="${pageContext.request.contextPath}/css/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen">
		<link rel="StyleSheet" href="${pageContext.request.contextPath}/css/treetable/tabletree4j.css" type="text/css" />
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/treetable/Core4j.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/treetable/TableTree4j.js"></script>
		<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.4.2.min.js"></script>
		<script src="${pageContext.request.contextPath}/js/jquery/jquery.ui.draggable.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/jquery/jquery.alerts.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/js/tools.js" type="text/javascript"></script>
		<style type="text/css">
			<!--
			body {
				margin-left: 0px;
				margin-top: 0px;
				margin-right: 0px;
				margin-bottom: 0px;
			}
			.STYLE1 {font-size: 12px}
			.STYLE3 {font-size: 12px; font-weight: bold; }
			.STYLE4 {
				color: #03515d;
				font-size: 12px;
			}
			-->
		</style>
		<script type="text/javascript">
			//提交
			function onChildGroup(){
				var url = "${pageContext.request.contextPath}/admin/group/initAddGroupinfo.action";
				
				groupLisForm.action = url;
				groupLisForm.target = "main";

				groupLisForm.submit();
			}

			

			var groupJson;
			function fifaExpandNodeEvent(node, tree){				
				if (node.isLoad == false) {
					tree.startLoadingNode(node);
					//alert("This alert is show you the node loading..."+node.id);

					$.ajaxSetup({ 
						  async: false 
					});
					
					var url = "test.action";  //groupName
					var params = {
							currentGroupId:node.id
						};
					$.post(url, params, loadChildren, "json");
					
					
					
					if(groupJson != null){
						//alert("dd");
						tree.loadingAddNodes(groupJson,node.id);
					}
					tree.endLoadingNode(node);
					groupJson = null;
				}
			}

			function loadChildren(jsonData){
				groupJson = jsonData;
			}
			
			function operateRenderFunction(infoObj){
				var node=infoObj.node;
				var aElobj=Core4j.Domhelper.createElement("a",{attributeNames:['href'],valueObject:{href:'#'}});
				
				Core4j.Domhelper.addEventToEl(aElobj,Core4j.Domhelper.ElEventType.CLICK,function(){
					location.href = "${pageContext.request.contextPath}/admin/group/groupView.action?viewGroupId=" + node.id;
				});
				aElobj.innerHTML="浏览";
				return aElobj;
			}
		</script>
	</head>
	
	<body>
		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td height="30" background="${pageContext.request.contextPath}/admin/images/main/tab_05.gif">
					<!-- 导航条 -->
					<table width="100%" border="0" cellspacing="0" cellpadding="0">
			      		<tr>
			        		<td width="12" height="30"><img src="${pageContext.request.contextPath}/admin/images/main/left-top-right.gif" width="12" height="30" /></td>
			       			<td>
			       				<table width="100%" border="0" cellspacing="0" cellpadding="0">
			          				<tr>
			            				<td width="46%" valign="middle">
			            					<table width="100%" border="0" cellspacing="0" cellpadding="0">
			              						<tr>
			                						<td width="5%"><div align="center"><img src="${pageContext.request.contextPath}/admin/images/main/tb.gif" width="16" height="16" /></div></td>
			                						<td width="95%" class="STYLE1"><span class="STYLE3">你当前的位置</span>：[组织管理]-[组织列表]</td>
			              						</tr>
			            					</table>
			            				</td>			            				
			          				</tr>
			        			</table>
			        		</td>
			        		<td width="16"><img src="${pageContext.request.contextPath}/admin/images/main/nav-right-bg.gif" width="16" height="30" /></td>
			      		</tr>
			    	</table>
			    </td>
			  </tr>
			  <!-- 新增内容 -->
			  <s:form name="groupLisForm" id="groupLisForm" action="addGroupinfo" method="post" namespace="/group" >
			  <tr>
			    <td>
			   		<table width="100%" border="0" cellspacing="0" cellpadding="0">
			      		<tr>
			        		<td width="3">&nbsp;</td>
			  	  	 		<td>
			  	  	 			<table width="100%" height="30" border="1" bgcolor="b5d6e6" cellpadding="0" cellspacing="1" class="nowtable">
             						<tr>
               						<td align="center" width="70%">&nbsp;&nbsp;&nbsp;&nbsp;当前组织:<s:property value="currentGroupName" /> 
               						<s:hidden  name="currentGroupId" id="currentGroupId" /></td>
               						<td align="left" width="30%"><input type=button value="添加下级组织" name="B1" onclick="onChildGroup()" /></td>
             						</tr>
	           		 			</table>
	           	 			</td>
	           	 			<td width="3" >&nbsp;</td>
	           	 		</tr>
	           	 	</table>
            	</td>
			  </tr>
			  </s:form>		  
		</table>
		
		<table>
			<tr>
				<td>
					<script type="text/javascript">

					//实现treegrid
					//设置表格头
					var titleColunms = [{
					  		columns:[
									{dataIndex:'GROUP_DIR'},
									{dataIndex:'SERIALID'},
									{dataIndex:'GROUP_NAME'},
									{dataIndex:'GROUP_ADDR'},
									{dataIndex:'GROUP_LVL'},
									{dataIndex:'GROUP_CODE'}
									],
							dataObject:{GROUP_DIR:'组织路径',SERIALID:'ID',GROUP_NAME:'组织名称',GROUP_ADDR:'地址',GROUP_LVL:'层次', GROUP_CODE:'组织编码'},
							trAttributeNames:['classStyle','style'],
							trAttributeValueObject:{classStyle:'headerbg',style:''}
				  	}];

					var groupGirdTree = new Core4j.toolbox.TableTree4j({
						columns:[
								{dataIndex:'GROUP_DIR',width:'15%'},
								{dataIndex:'SERIALID',width:'10%'},
								{isNodeClick:true,dataIndex:'GROUP_NAME',width:'20%'},
								{dataIndex:'GROUP_ADDR',width:'25%'},
								{dataIndex:'GROUP_LVL',width:'10%'},
								{dataIndex:'GROUP_CODE',width:'15%'},
								{width:'5%',canSort:false,renderFunction:operateRenderFunction}
								],
						treeMode:'gird',
						renderTo:'GROUP_CODE',
						useLine:true,
						useIcon:true,
						id:'SERIALID',
						onExpandNodeEvents:[fifaExpandNodeEvent],
						headers:titleColunms,				
						themeName:'arrow',
						selectMode:'single'				
					});
					
					var url = "test.action";					
					
					$.post(url, callback, "json");
					
					function callback(data){
						groupGirdTree.build(data,true);
					}			
					</script>
				</td>
			</tr>
		</table>
	</body>
</html>